<template>
  <view class="page bg-white">
    <view class="main padding-left-lg padding-right-lg">
      <u-text align="center" color="#333" size="32rpx" text="请选择您的登录身份" bold></u-text>
      <u-text align="center" color="#666666" size="28rpx" text="检测到您的账户拥有多个身份，请选择本次要使用的身份"></u-text>
      <view class="role-item" v-for="item in roleList" :key="item.id" :style="{
        backgroundColor: item.id === activeId ? themePrimary : 'transparent'
      }" @click="handleRole(item)">
        <view class="flex-1 flex align-end justify-end" style="height:100%">
          <image class="icon" :src="item.icon" mode="aspectFit"></image>
        </view>
        <view class="flex-1 margin-left">
          <u-text :text="item.name" size="32rpx" :color="item.id === activeId ? '#fff' : '#333'" bold></u-text>
          <u-text margin="10rpx 0 0 0" :text="item.subName" size="26rpx"
            :color="item.id === activeId ? '#fff' : '#333'"></u-text>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useTheme } from '@/composables/useTheme';
// 解构获取主题色
const { themePrimary } = useTheme();
const activeId = ref(null);

const roleList = ref([
  {
    id: 1,
    name: '家长/学生端',
    icon: '/static/image/img-student.png',
    subName: '查看学业、提交作业',
    url: '/pages/parent/index/index',
    role: 'parent'
  },
  {
    id: 2,
    name: '教师',
    icon: '/static/image/img-teacher.png',
    subName: '管理班级、执行教学',
    url: '/pages/teacher/index/index',
    role: 'teacher'
  },
  {
    id: 3,
    name: '校长',
    icon: '/static/image/img-master.png',
    subName: '总览数据、统筹教务',
    url: '/pages/principal/index/index',
    role: 'principal'
  }
]);

const handleRole = (item) => {
  activeId.value = item.id;
  uni.setStorageSync('role', item.role);
  uni.reLaunch({
    url: item.url,
  })
};

onMounted(() => {
  const role = uni.getStorageSync('role');
  if (role) {
    activeId.value = roleList.value.find(item => item.role === role).id;
  }
})
</script>
<style scoped lang="scss">
.role-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: solid 1px #D8D8D8;
  border-radius: 32rpx;
  width: 100%;
  height: 230rpx;
  margin: 40rpx 0 0 0;
  box-sizing: border-box;

  &.active {
    background: var(--primary);
    border: solid 1px var(--primary);
  }

  .icon {
    width: 200rpx;
    height: 200rpx;
  }
}
</style>